<template>
  <div class="login">
    <Partivleground> </Partivleground>
    <el-card class="login-box">
      <el-form ref="loginFormRef" :model="loginForm" label-width="0">
        <el-form-item>
          <h1 class="logo-title">菜鸟博客后台登录</h1>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
            placeholder="用户名或者邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="10">
            <el-col :span="13">
              <el-input
                inline-message
                v-model="loginForm.verCode"
                placeholder="验证码"
                style="margin-top: 4px"
              ></el-input
            ></el-col>
            <el-col :span="6">
              <img
                @click="changeCaptcha"
                v-if="isShowCaptcha"
                :src="captchaImgUrl"
                alt=""
              />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login"> 登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { captcha, loginBlog } from '../../../api/api'

import Partivleground from '@/components/VuePartivleground/VuePartivleground'

export default {
  components: {
    Partivleground
  },

  created() {
    this.getCaptcha()
  },
  data() {
    return {
      captchaImgUrl: '',
      loginForm: {
        username: '',
        password: null,
        verCode: null
      },
      isShowCaptcha: true
    }
  },
  methods: {
    //获取验证码
    getCaptcha() {
      captcha().then((res) => {
        // 解构赋值
        console.log(res)

        const { data } = res

        //获取图片
        const myBlob = new window.Blob([data], { type: 'image/jpeg' })
        this.captchaImgUrl = window.URL.createObjectURL(myBlob)
      })
    },
    // 登录
    login() {
     return     this.$router.push('welcome')
      loginBlog(this.loginForm)
        .then((res) => {
          // 解构赋值
          const { data: data } = res
          if (data.message == '验证码错误') {
            this.$message.error('验证码错误，请重新输入')
            this.loginForm.verCode = null
            //刷新验证码
            this.getCaptcha()
            return
          }

          //登录成功，进行跳转
          this.$router.push('welcome')
        })
        .catch((error) => {
          console.log(error.response)
          if (error.response.data.message == '用户名或密码错误，登录失败') {
            this.$message.error('用户名或密码错误,请重新输入')
            //刷新验证码
            this.getCaptcha()
          }
        })
    },

    changeCaptcha() {
      this.getCaptcha()
    },
    aaa() {
      this.$router.push('welcome')
    }
  }
}
</script>

<style lang="less" scoped>
#particles {
  height: 100%;
}

.login {
  height: 100%;
  // background-color: #009688;
}

.login-box {
  width: 360px;
  height: 320px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.el-form-item {
  margin-bottom: 15px;
}

.logo-title {
  margin: 0;
  padding: 0 !important;

  text-align: center;
  letter-spacing: 2px;

  color: #009688;
  font-size: 25px;
  font-weight: bold;
}

.el-button {
  width: 100%;
  position: relative;
  top: -10px;
}
</style>
